<template>
    <div>
        <div id="map"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineProps, onMounted } from 'vue'
const props = defineProps({
    isTrue: Boolean,
    mode: String
})
const tMapKey = ref("VWWBZ-PP6KS-CHMOW-6LPO6-3T2QK-52FBA")
onMounted(() => {
  loadScript()
  console.log('isTrue,mode', props.isTrue, props.mode)
})
function initMap() {
  // 定义地图中心点坐标
  console.log("window", window)
  const center: any = new window.TMap.LatLng(39.98412, 116.307484)
  // 定义map变量，调用 TMap.Map() 构造函数创建地图
  const map = new window.TMap.Map(document.getElementById("map"), {
    center: center, // 设置地图中心点坐标
    zoom: 12, // 设置地图缩放级别
  })
  return map
  
}
function loadScript() {
  /** https://map.qq.com/api/gljs?v=1.exp&key=VWWBZ-PP6KS-CHMOW-6LPO6-3T2QK-52FBA&libraries=tools" */
  if(!window.TMap) {
      const script: any = document.createElement("script");
        script.type = "text/javascript";
        script.src = `https://map.qq.com/api/gljs?v=1.exp&key=${tMapKey}&libraries=tools`;
        script.onload = () => {
            initMap();
        }
        document.body.appendChild(script);
  } else {
    initMap();
  }
}
</script>